<template>
  <el-dialog title="返利链接" :visible.sync="dialogVisible" width="40%" @close="handleClose">
    <el-form :model="form" label-width="100px">
      <el-form-item label="商品链接">
        <el-input v-model="form.goodsUrl" placeholder="请输入商品链接"  type="textarea" :rows="4"></el-input>
      </el-form-item>
      <div style="text-align: center;">
        <el-button type="primary" @click="getUrl">获取</el-button>
      </div>
      <el-form-item label="返利链接">
        <el-input v-model="rebateUrl" placeholder="请输入返利链接"  type="textarea" :rows="4" size="mini"></el-input>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="handleClose">取 消</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { getRebateUrl } from '@/api/mx/order'

export default {
  name: 'getRebateUrl',
  props: {
    dialogVisible: {
      type: Boolean,
      default: false
    },
  },
  data() {
    return {
      form: {
        goodsUrl: '',
      },
      rebateUrl:null
    };
  },
  methods: {
    handleClose() {
      this.$emit('close');
    },
    getUrl() {
      // 这里可以添加保存逻辑，比如调用后端API保存返利链接
      const data = {
        goodsUrl: this.form.goodsUrl,
      };

      // 假设有一个 saveRebateUrl 的 API
      getRebateUrl(data).then(response => {
        if (response.code == 200) {
          this.rebateUrl = response.data.clickURL
          this.$message.success('获取成功');
          this.$forceUpdate()
        }
      }).catch(() => {
        this.$message.error('获取失败');
      });
    }
  }
};
</script>

<style scoped>
/* 添加一些样式 */
</style>
